<template>
  <div class="field-container">
    <a-divider>表单组件</a-divider>
    <div class="field-container-section">
      <div :key="fieldComponent.comp.getFieldComponentName()"
           data-role="field-component" draggable="true"
           :data-component="fieldComponent.comp.getFieldComponentName()"
           v-for="(fieldComponent, key) in FormFieldRegister">
        {{ fieldComponent.comp.getFieldComponentTitle() }}
      </div>
    </div>
    <a-divider>业务组件</a-divider>
    <div class="field-container-section">
      <div :key="fieldComponent.comp.getFieldComponentName()"
           data-role="field-component" draggable="true"
           :data-component="fieldComponent.comp.getFieldComponentName()"
           v-for="(fieldComponent, key) in BusinessRegister">
        {{ fieldComponent.comp.getFieldComponentTitle() }}
      </div>
    </div>
    <a-divider>布局组件</a-divider>
    <div class="field-container-section">
      <div :key="fieldComponent.comp.getFieldComponentName()"
           data-role="layout-component" draggable="true"
           :data-component="fieldComponent.comp.getFieldComponentName()"
           v-for="fieldComponent in LayoutRegister">
        {{ fieldComponent.comp.getFieldComponentTitle() }}
      </div>
    </div>
    <a-divider>自定义控件</a-divider>
    <div class="field-container-section">
      <div :key="fieldComponent.comp.getFieldComponentName()"
           data-role="field-component" draggable="true"
           :data-component="fieldComponent.comp.getFieldComponentName()"
           v-for="fieldComponent in CustomRegister">
        {{ fieldComponent.comp.getFieldComponentTitle() }}
      </div>
    </div>
  </div>
</template>
<script>
import FormFieldRegister, {BusinessRegister, CustomRegister, LayoutRegister} from '@/components/hhd/design/FormDesigner/field/comps/FieldRegister';

export default {
  name: 'FieldContainer',
  data() {
    return {
      FormFieldRegister,
      BusinessRegister,
      LayoutRegister,
      CustomRegister
    };
  }
};
</script>
